<template>
	<div class="container">
		<div class="search">
			<router-link to="/city" class="aIconfont">
				<i class="iconfont icon-zuobiao"></i>
				<span>{{city}}</span>
			</router-link>
			<div class="input" @click="searchClick">
				<i class="iconfont icon-search"></i>
				<p>請輸入關鍵字搜索</p>
			</div>
		</div>
		<div class="swiper-container2">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="item in swiperList" :key="item.id">
					<img :src="item.src" alt>
				</div>
			</div>
		</div>
		<div class="nav">
			<ul class="clearfix">
				<li>
					<i class="iconfont icon-tianmaobaoyouqia"></i>
					<span>满99元包邮</span>
				</li>
				<li>
					<i class="iconfont icon-shizhong"></i>
					<span>有机绿色生态</span>
				</li>
				<li>
					<i class="iconfont icon-huoche"></i>
					<span>全国冷链配送</span>
				</li>
			</ul>
			<div class="navList">
				<router-link :to="{path:'/more',query:{listId:1}}">
					<img src="../assets/img/5ab22a3773c8d2.18830057.png" alt>
					<span>生态果蔬</span>
				</router-link>
				<router-link to="{path:'/more',query:{listId:2}}">
					<img src="../assets/img/5ab22a59167b82.16932606.png" alt>
					<span>肉禽蛋品</span>
				</router-link>
				<router-link to="{path:'/more',query:{listId:3}}">
					<img src="../assets/img/5ab22a4e4eb557.70923169.png" alt>
					<span>米面粮油</span>
				</router-link>
				<router-link to="{path:'/more',query:{listId:4}}">
					<img src="../assets/img/5bf77aefefb136.31342760.png" alt>
					<span>休闲零食</span>
				</router-link>
			</div>
		</div>

		<!-- list -->
		<List :optimization-list = optimizationList v-on:chuan = "chuan"></List>
		<HotList :optimization-hot-list = hotList ></HotList>
		<Nav></Nav>
	</div>
</template>
<script>
import List from './list/list'
import HotList from './list/hot'
import Nav from './nav/nav'
import Swiper from 'swiper'
import axios from 'axios'
import 'swiper/dist/css/swiper.min.css'
import '../assets/iconfont/iconfont.css'

export default {
  name: 'index',
  components: {
    List,
    HotList,
    Nav
  },
  data () {
    return {
      city: '',
      swiperList: [
        {
          id: 1,
          src:
						'http://www.xiaosaonian.cn/img/5c871094ec0779.11045301.jpg'
        },
        {
          id: 2,
          src:
						'http://www.xiaosaonian.cn/img/5c7dd35ac30157.53056552.jpg'
        },
        {
          id: 3,
          src:
						'http://www.xiaosaonian.cn/img/5c7c8b56ab55c5.78092719.png'
        }
      ],
      arr: [1, 2, 3, 4, 5],
      optimizationList: [],
      hotList: [],
      chuan: ''
    }
  },
  created: function () {
    this.city = this.$store.state.city
  },
  mounted: function () {
    this.swiperImg()
    this.getOptimization()
  },
  methods: {
    swiperImg () {
      new Swiper('.swiper-container2', {
        slidePerview: 3,
        loop: true,
        autoplay: {
          delay: 3000
        }
      })

      // 由于没有后台接口 临时存一下购物车的状态
      var cartStatus = localStorage.getItem('cartStatus')
      /* 防止手动清空缓存 */
      if (cartStatus === null && cartStatus === '') {
        localStorage.setItem('cartStatus', true)
      }
    },
    searchClick () {
      this.$router.push('/search')
    },
    getOptimization () {
      axios.get('/city.json').then(res => {
        // 获取推荐数据
        this.$store.commit('getOptimization', res.data)
        this.optimizationList = this.$store.state.optimization.optimizationList
        this.hotList = this.$store.state.optimization.hotList
        localStorage.setItem('optimizationList', JSON.stringify(this.hotList))
        // console.log(this.$store.state.optimization.optimizationList)
      })
    }
  }
}
</script>

<style lang="stylus" scope>
.container
	width: 100%
	overflow: hidden
	background-color: #eee
	.swiper-container2
		width: 100%
		.swiper-wrapper
			width: 100%
			.swiper-slide
				width: 50%
				img
					display: block
					width: 100%
	.search
		position: absolute
		left: 0.32rem
		right: 0.32rem
		top: 0.3rem
		z-index: 2
		display: flex
		flex-direction: row
		.aIconfont
			display: flex
			align-items: center
			span
				font-size: 0.24rem
				width: 1rem
				display: block
				overflow: hidden
				text-overflow: ellipsis
				white-space: nowrap
				text-align: center
		.input
			margin-left: 0.5rem
			display: flex
			flex-direction: row
			background-color: rgba(255, 255, 255, 0.5)
			border-radius: 5px
			height: 0.6rem
			line-height: 0.6rem
			width: 5.68rem
			justify-content: center
			p
				font-size: 0.2rem
				margin-left: 0.1rem
		.iconfont
			font-size: 0.3rem
	.nav
		background-color: #fff
		padding-bottom: .2rem
		ul
			display: flex
			flex-direction: row
			backgruond-color: #fff
			padding: 0 0.7rem
			justify-content: space-between
			li
				height: 0.64rem
				line-height: 0.64rem
				font-size: 0.22rem
				text-align: center
				color: #ff712b
				i
					width: 0.34rem
					height: 0.64rem
					margin-right: 0.1rem
	.navList
		padding: 0 0.7rem
		display: flex
		flex-direction: row
		justify-content: space-between
		a
			text-align: center
			font-size: 0.24rem
			span
				display: block
				margin-top: 0.2rem
			img
				width: 1rem
				height: 1rem
</style>
